<%-- 
    Document   : project
    Created on : Dec 14, 2012, 5:19:13 PM
    Author     : mruiz
--%>

<%-- 
    Document   : index
    Created on : Dec 20, 2012, 2:22:42 AM
    Author     : mruiz
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

    <head>
        <jsp:include page="includes/header.jsp"/>   
    </head>

    <body>

        <jsp:include page="includes/menu.jsp"/>   


        <div class="container">
            <div class="offset8 right">
                <form class="form-search">
                    <input type="text" class="input-medium search-query">
                    <button type="submit" class="btn">Search</button>
                </form>
            </div>

            <div>
                <div id="myCarousel" class="carousel slide">
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="active item"><img src="resources/images/project_imgs/graphic_project.jpg" alt="project 1"></div>
                        <div class="item"><img src="resources/images/project_imgs/project-management.jpg" alt="project 2"></div>
                        <div class="item"><iframe width="640" height="360" src="http://www.youtube.com/embed/_Uev4hf0Pk4?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></div>
                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                </div>
            </div>



            <div class="offset10">
                <h3>Categories</h3> 
                <ul class="unstyled">
                    <li class="unstyled"> HTML</li>
                    <li class="unstyled"> CSS</li>
                    <li class="unstyled"> JAVASCRIPT</li>
                    <li class="unstyled"> JAVA</li>
                    <li class="unstyled"> PHP</li>
                    <li class="unstyled"> DJANGO</li>
                    <li class="unstyled"> CAKE PHP</li>
                    <li class="unstyled"> C++</li>
                    <li class="unstyled"> MYSQL</li>
                    <li class="unstyled"> Iphone</li>
                    <li class="unstyled"> Android</li>
                    <li class="unstyled"> C#</li>
                    <li class="unstyled"> .NET</li>
                    <li class="unstyled"> Objective-C</li>
                </ul>
            </div>
            <!-- Example row of columns -->
            <div class="row">
                <div class="span12">
                    <h4>Random projects</h4>
                    <img src="resources/images/project_imgs/project1.png" class="img-polaroid"/>
                    <img src="resources/images/project_imgs/project2.png" class="img-polaroid"/>
                    <img src="resources/images/project_imgs/project3.png" class="img-polaroid"/>
                    <img src="resources/images/project_imgs/project4.png" class="img-polaroid" width="128px"/>
                    <img src="resources/images/project_imgs/project5.png" class="img-polaroid"/>
                </div>
            </div>

            <hr>

            <jsp:include page="includes/footer.jsp"/>  

        </div> <!-- /container -->

        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="resources/js/jquery.js"></script>
        <script src="resources/js/bootstrap-transition.js"></script>
        <script src="resources/js/bootstrap-alert.js"></script>
        <script src="resources/js/bootstrap-modal.js"></script>
        <script src="resources/js/bootstrap-dropdown.js"></script>
        <script src="resources/js/bootstrap-scrollspy.js"></script>
        <script src="resources/js/bootstrap-tab.js"></script>
        <script src="resources/js/bootstrap-tooltip.js"></script>
        <script src="resources/js/bootstrap-popover.js"></script>
        <script src="resources/js/bootstrap-button.js"></script>
        <script src="resources/js/bootstrap-collapse.js"></script>
        <script src="resources/js/bootstrap-carousel.js"></script>
        <script src="resources/js/bootstrap-typeahead.js"></script>

<!--        <script>
                !function ($) {
                $(function(){
                    // carousel demo
                    $('#myCarousel').carousel()
                })
            }(window.jQuery)
        </script>-->

    </body></html>

